<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影列表</title>
    <%- include conmon %>
</head>
<body>
    <%- include("header",{title:"movie"}) %>  
    <div class="container">
        <div class="row">
            <!-- 搜索 -->
            <div class="form-group col-md-4" style="display: flex;">
                <input id="keyword" type="text" class="form-control" placeholder="搜索电影">
                <button class="btn btn-success" onclick="todoSearch()">搜索</button>
            </div>
            <!-- 排序 -->
            <div class="col-md-4">
                <button class="btn btn-danger" onclick="location.href='/movie?year=1'">年份升序</button>
                <button class="btn btn-info" onclick="location.href='/movie?year=-1'">年份降序</button>
                <button class="btn btn-primary" onclick="location.href='/movie?rating.average=1'">评分升序</button>
                <button class="btn btn-warning" onclick="location.href='/movie?rating.average=-1'">评分降序</button>
            </div>
        </div>
        <div class="row">
            <h2 class="text-info">电影列表</h2>
        <%    result.forEach((item,index)=>{     %>
                <div class="col-md-3 col-sm-3 col-lg-3">
                    <!-- thumbnail图文混合 -->
                    <div class="thumbnail">
                        <img src="<%- item.images.medium.replace(/img7/,'img3') %>" alt="" style="width:100%;height:180px "/>
                        <div class="caption">
                            <a href="/comment/index?mid=<%- item.id %>">
                                <h4 class="text-primary pull-right"> <%- item.year %> </h4>
                                <h4 class="text-danger"> <%- item.title %> </h4>
                                <p class="text-success">评分: <%- item.rating.average %></p>
                                <p class="text-info">导演：<%-  item.directors[0].name %> </p>
                                <p class="text-warnning">分类：<%- item.genres %> </p>
                            </a>
                        </div>
                    </div>
                </div>
        <%    });      %>      
        </div>
    </div>

    <!-- 尾部结构 -->
    <%- include('footer') %>


    <script>
        function todoSearch(){
            location.href="/movie?keyword="+ $('#keyword').val();
        }
    </script>
</body>
</html>

